<template>
  <div class="footprint">
    <img src="@/assets/图3@2x.png" alt="">

    <div class="info-wrap">
      <div class="user-info">
        <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="">
        <p>张小红</p>
      </div>
      <div class="information">
        <b>农行跨境金融服务网络</b>
        <p><span>17</span>个国家和城市 | <span>21</span>家机构</p>
      </div>
    </div>

    <div class="consumption">
      <div class="content">
        <div class="tips">近6个月消费 <span>321</span> 笔，累计金额</div>
        <div class="amount">￥32,100.00</div>
        <div class="reduced">
          人民币￥<span>32,100.00</span>
          外币折算￥<span>2210.00</span>
        </div>
      </div>
      <img src="@/assets/bg_02.png" alt="">
    </div>

    <div class="space"></div>

    <div class="recommend">
      <div class="title">全球权益尊享推荐</div>
      <div>
        <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="">
      </div>
      <div class="name">
        <p>海淘好运元气犇腾万事达</p>
        <span>立即申请</span>
      </div>
      <div class="desc">全球500+连锁酒店品牌消费8折优惠。机票免费升舱,旅游景点优惠22</div>
    </div>


    <div class="p-w-40">
      <div class="swiper-container" id="adv">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in 4"
            :key="index"
          >
            <img src="@/assets/bg_02.png" alt="">
          </div>
        </div>
      </div>
      <div class="adv-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  mounted(){
    new Swiper("#adv", {
      centeredSlides: true,
      slidesPerView: "auto",
      spaceBetween: 10,
      autoplay: true,
      loop: true,
      pagination: {
        bulletClass: "adv-bullet",
        bulletActiveClass: "adv-bullet__active",
        el: ".adv-pagination"
      }
    });
  }
}
</script>

<style lang="stylus">
  .adv-bullet
    width 38px
    height 3px
    background rgba(150, 150, 150, 1)
    display block
    margin 0 10px

    &__active
      background rgba(77, 176, 222, 1)

  .adv-pagination
    display flex
    justify-content center
    align-items center
    height 30px
    margin-bottom 40px

  .recommend
    padding 0 30px
    margin-bottom 30px

    .title
      font-size 32px
      margin-top 40px
      margin-bottom 20px

    .desc
      font-size 22px
      color rgba(102, 102, 102, 1)
      text-overflow ellipsis
      white-space nowrap
      overflow hidden
      margin-top 15px

    .name
      height 48px
      display flex;
      justify-content space-between
      font-size 28px
      align-items center
      margin-top 20px

      span
        width: 120px;
        height: 48px;
        background: #FFA800;
        border-radius: 8px;
        font-size 24px
        color #fff
        line-height 48px
        text-align center

        

  .consumption
    margin 30px
    margin-top 0px
    position relative

    .content
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      padding 32px
      display flex
      flex-direction column
      justify-content space-between

      .reduced
        font-size 22px
        span
          color: #00CCA3;

      .amount
        font-size: 40px;
        font-weight: 500;
        color: #00CCA3;

      .tips
        font-size 22px
        color rgba(51, 51, 51, 1)
        span
          color rgba(255, 183, 0, 1)
  
  .space
    width: 750px;
    height: 20px;
    background: #F8F8F8;

  .info-wrap
    margin-top -28px
    background #FFF
    position relative
    display flex
    justify-content space-between
    padding 0 30px

    .information
      text-align right
      b
        font-size 32px
        margin 30px 0
        display block
      p
        font-size 28px
      span
        font-size 32px
        color rgba(0, 204, 163, 1)


    .user-info
      transform translateY(-60px)
      text-align center
      width 132px
      margin-left 30px
      
      img
        border-radius 100%
        border: 6px solid #FFFFFF;
        box-shadow: 0px 6px 9px 0px rgba(164, 164, 164, 0.2);
        width 120px
        height 120px
        margin-bottom 15px

</style>